Problem

In the teacher lesson editor (Contenido tab), clicking Añadir bloque opens a palette listing 23 block types across 5 groups — roughly 875px tall. PopoverContent had no height cap and no scroll, so on a normal desktop viewport the bottom of the list was simply cut off: the Separador block was completely unreachable and the last Estructura row sat half off-screen.

Measured on a 1440×800 viewport with the lower "Añadir bloque" trigger: popup bottom at 880px vs a 800px viewport → 80px of blocks with no way to reach them.

Root cause

components/ui/popover.tsx was the only base-ui overlay primitive in the repo missing the height treatment its siblings already have — select.tsx, dropdown-menu.tsx and combobox.tsx all use max-h-(--available-height) + overflow-y-auto (base-ui sets --available-height on the positioner). So any popover taller than the space around its trigger overflowed the viewport. lesson-component-picker.tsx has the same latent bug.

Changes

• components/ui/popover.tsx — add max-h-(--available-height) overflow-y-auto overscroll-contain, matching the other overlay primitives. Fixes every over-tall popover, not just this one.
• components/teacher/block-editor/add-block-menu.tsx — readability pass on the palette, since the user also reported it was hard to read:
  • item labels text-[11px] muted → text-xs at text-foreground/80 (the 11px muted-on-popover pairing was below comfortable contrast)
  • group headings text-[10px] at text-muted-foreground/60 → text-[11px] at full text-muted-foreground
  • popover width 340px → 360px so the larger labels still fit 3 columns

Verification

• npm run typecheck — clean
• npm run build — passes
• npx eslint on both changed files — clean
• Browser-verified at 1440×800 as creator@codeacademy.com on /es/dashboard/teacher/courses/2001/lessons/2001:
  • before (cap disabled at runtime to reproduce): popup bottom 880px, 80px clipped, "Separador" invisible
  • after: max-height: 774px = reported available height, popup bottom 780px (inside the viewport), scrollHeight 874 > clientHeight 774 → scrolls, and Separador is reachable

QA script

1. npm run dev, sign in as creator@codeacademy.com / password123 at code-academy.lvh.me:3000
2. Open a lesson: /es/dashboard/teacher/courses/2001/lessons/2001 → Contenido tab
3. Click the lower Añadir bloque button (the one near the bottom of the page)
4. The palette should end inside the viewport and scroll internally — scroll to the bottom and confirm Separador under ESTRUCTURA is fully visible and clickable
5. Repeat with the small + inserter that appears when hovering between two blocks
6. Sanity-check the notification bell popover still renders normally

🤖 Generated with Claude Code

https://claude.ai/code/session_01MVN1bVpXJQ2CT7nv4acFRz